<script lang="ts">
import { defineComponent, ref, onUnmounted, onMounted, onBeforeUnmount } from 'vue'
import router from '@/router'
import { useRoute } from 'vue-router'
import { useCarStore } from '../stores/shopcar'
import { useAddressStore } from '../stores/address'
import { showToast } from 'vant'
import { areaList } from '@vant/area-data'

export default defineComponent({
  setup() {
    let route = useRoute()

    let carStore: any = useCarStore()

    let addressStore: any = useAddressStore()

    let orderList: any = ref([]) // 订单列表

    let addressList: any = ref([]) // 地址列表

    let totalPrice: any = ref(0) // 总价

    let addressFlag: any = ref(false) // 添加地址显示

    let add_Flag: any = ref(false) // 添加显示地址

    let def_address: any = ref() // 默认地址

    let def_id: any = ref() // 默认地址id

    let pageFlag: any = ref(false) // 显示支付页面

    let giveupFlag: any = ref(false) // 显示放弃支付页面

    let payStyleFlag: any = ref(true) // 选择支付方式

    let order_state: any = ref(0) // 订单状态

    let mark: any = ref('') // 备注

    // 获取订单数据
    const getOrder = () => {
      let order_ids: any = ref([])

      order_ids.value = route.query.ids

      let carArr: any = ref([])

      carArr.value = carStore.carList

      // console.log(order_ids.value)
      console.log(carArr.value)

      order_ids.value.forEach((item: any) => {
        carArr.value.filter((i: any) => {
          if (item == i.id) {
            orderList.value.push(i)
          }
        })
      })

      orderList.value.forEach((item: any) => {
        totalPrice.value += item.price * item.count
      })

      // console.log(totalPrice.value)
    }

    // 新增收获地址
    const searchResult: any = ref([])

    // 保存地址数据
    const onSave = (event: any) => {
      let addId = Date.now()

      addressStore.addressList.unshift({ ...event, isChose: false, id: addId })

      addressStore.addressList.forEach((item: any) => {
        item.isChose = false
      })

      addressStore.addressList[0].isChose = true

      addressList.value = addressStore.addressList

      // addressStore.addressList = []
      // addressList.value = []

      def_address.value = addressStore.addressList[0]

      add_Flag.value = false

      showToast('保存成功')
      console.log(addressList.value)
    }

    // 获取地址
    const getAddress = () => {
      console.log(addressList.value)
      // addressStore.addressList = []
      // addressList.value = []

      if (addressList.value.length) {
        addressList.value.forEach((item: any) => {
          if (item.isDefault) {
            def_address.value = item
            item.isChose = true
            def_id.value = item.id
            return
          } else {
            console.log(1111)
            def_address.value = addressList.value[0]
            item.isChose = false
            addressList.value[0].isChose = true
          }
        })
      } else {
        return
      }
    }

    // 修改地址
    const editAddress = (id: any) => {
      let index = addressList.value.findIndex((item: any) => {
        return item.id == id
      })

      addressList.value.forEach((item: any) => {
        // item.isDefault = false
        item.isChose = false
      })

      addressList.value[index].isChose = true

      def_address.value = addressList.value[index]
    }

    // 删除地址
    const editAdd = (id: any) => {
      let index = addressList.value.findIndex((item: any) => {
        return item.id == id
      })

      addressList.value.splice(index, 1)
      addressList.value[0].isChose = true
      def_address.value = addressList.value[0]

      if (addressList.value.length == 0) {
        def_address.value = null
      }
    }

    // 支付订单
    const payOrder = () => {
      if (def_address.value) {
        pageFlag.value = true
      } else {
        showToast('请先确认收货地址~')
      }
    }

    // 确认放弃
    const affirm = () => {
      var date = +new Date()
      order_state.value = 2
      router.push({
        path: '/order',
        query: {
          addressId: def_address.value.id,
          orderIds: route.query.ids,
          orderState: order_state.value,
          proDate: date
        }
      })
    }

    // 立即支付
    const immediaPay = () => {
      var date = +new Date()
      order_state.value = 3
      router.push({
        path: '/order',
        query: {
          addressId: def_address.value.id,
          orderIds: route.query.ids,
          orderState: order_state.value,
          proDate: date
        }
      })
    }

    // const editMark = (id: any) => {
    //   if (id == )
    // }

    const onDelete = () => showToast('delete')
    const onChangeDetail = (val: any) => {
      if (val) {
        searchResult.value = [
          // {
          //   name: '黄龙万科中心',
          //   address: '杭州市西湖区'
          // }
        ]
      } else {
        searchResult.value = []
      }
    }

    onMounted(() => {
      getOrder()
      addressList.value = addressStore.addressList
      getAddress()
    })

    onBeforeUnmount(() => {
      // reSetDefault()
    })

    return {
      orderList,
      totalPrice,
      addressFlag,
      onSave, // 新增收获地址
      onDelete,
      areaList,
      searchResult,
      onChangeDetail,
      add_Flag,
      addressList, // 地址列表
      def_address, // 默认地址
      editAddress, // 修改地址
      editAdd, // 删除地址
      payOrder, // 支付订单
      pageFlag,
      payStyleFlag,
      giveupFlag,
      affirm, // 确认放弃
      immediaPay, // 立即支付
      mark // 备注
      // editMark // 编辑备注
    }
  }
})
</script>
<template>
  <!-- <div @click="$router.back()"></div> -->
  <div id="app">
    <!-- 确认订单 -->
    <div class="order-til">
      <div class="back_btn iconfont icon-zuojiantou" @click="$router.back()"></div>
      <div class="title">确认订单</div>
      <div class="entry"></div>
    </div>
    <!-- 收货地址 -->
    <div class="address" @click="addressFlag = true">
      <div class="add_con" v-if="!addressList.length">
        <span><i class="iconfont icon-dingweixiao"></i>无收货地址，请点击前往设置</span>
        <i class="iconfont icon-youjiantou"></i>
      </div>
      <!-- 选择后的地址 -->
      <div class="chosed_addredss" v-if="addressList.length">
        <div class="chosed_left">
          <div class="chosed_icon">
            <i class="iconfont icon-dingweixiao"></i>
          </div>
          <div class="chosed_con">
            <div class="cho_top">
              {{ def_address.province }}{{ def_address.city }}{{ def_address.county
              }}{{ def_address.addressDetail }}
            </div>
            <div class="cho_bo">{{ def_address.name }} {{ def_address.tel }}</div>
          </div>
        </div>
        <div class="chosed_right">
          <i class="iconfont icon-youjiantou"></i>
        </div>
      </div>
    </div>
    <!-- 商品信息 -->
    <div class="goods-info" v-for="item in orderList" :key="item.id">
      <!-- <img src="../assets/img/15.jpg" alt=""> -->
      <!-- 信息 -->
      <div class="goods_mess">
        <div class="img"><img :src="item.cover_url || item.def_img" alt="" /></div>
        <div class="good_con">
          <div class="title">
            <span class="one-txt-cut">{{ item.name }}</span>
            <span class="one_price">￥{{ (item.price / 100).toFixed(2) }}</span>
          </div>
          <div class="good_dec">
            <span class="txt-cut dec">{{ item.style }}</span>
            <span class="one_count">x{{ item.count }}</span>
          </div>
        </div>
      </div>
      <!-- 小计 -->
      <div class="subtotal">
        <div class="sub_item">
          <span>商品金额:</span>
          <span>￥{{ ((item.price * item.count) / 100).toFixed(2) }}</span>
        </div>
        <div class="sub_item">
          <span>运费:</span>
          <span>包邮</span>
        </div>
        <div class="sub_item">
          <span>店铺优惠:</span>
          <span>暂无可用优惠</span>
        </div>
        <div class="sub_tol">
          <span>小计</span>
          <span class="sub_pri">￥{{ ((item.price * item.count) / 100).toFixed(2) }}</span>
        </div>
      </div>
      <!-- 备注 -->
      <!-- <div class="remark">
        <span>备注</span>
        <input type="text" placeholder="选填，建议先和客服协商一致" v-model="mark" />
      </div> -->
    </div>

    <div style="width: 100%; height: 65px; background-color: #f5f5f5"></div>
    <!-- 提交订单 -->
    <div class="sub_order">
      <div class="con">
        共{{ orderList.length }}件，需付款 <span><i>￥</i>{{ (totalPrice / 100).toFixed(2) }}</span>
      </div>
      <div class="submit-btn" @click="payOrder()">提交订单</div>
    </div>
    <!-- 选择收货地址 -->
    <div class="chose_address" v-if="addressFlag">
      <div class="bank" @click="addressFlag = false"></div>
      <div class="add_con">
        <h4 class="title">选择收货地址</h4>
        <!-- 未添加 -->
        <div class="no_address" v-if="!addressList.length">
          <div class="img">
            <img src="../../src/assets/img01/address.png" alt="" />
          </div>
          <h4>您还没有添加过地址哦～</h4>
        </div>
        <!-- 已添加 -->
        <div class="has_address">
          <!-- 每一项地址 -->
          <div class="address_item" v-for="(item, index) in addressList" :key="index">
            <!-- 左 -->
            <div class="item_left" @click="editAddress(item.id)">
              <i :class="['iconfont', 'icon-tick', { con: item.isChose }]"></i>
              <!-- 信息 -->
              <div class="message">
                <div class="mess_top">
                  <span class="name">{{ item.name }}</span>
                  <span class="tel">{{ item.tel }}</span>
                  <span class="default" v-if="item.isDefault">默认</span>
                </div>
                <div class="mess_bo">
                  <span>{{ item.province }}</span>
                  <span>{{ item.city }}</span>
                  <span>{{ item.county }}</span>
                  <span>{{ item.addressDetail }}</span>
                </div>
              </div>
            </div>
            <!-- 右 -->
            <div class="item_right iconfont icon-shanchu" @click="editAdd(item.id)"></div>
          </div>
        </div>
        <!-- 新增按钮 -->
        <div class="add_btn" @click="add_Flag = true"><span>新增收货地址</span></div>
      </div>
    </div>
    <!-- 新增收货地址 :area-list="areaList"-->
    <div class="add_address" v-if="add_Flag">
      <div class="title">
        <i class="iconfont icon-zuojiantou" @click="add_Flag = false"></i><span>新增收货地址</span>
      </div>
      <van-address-edit
        show-delete
        show-set-default
        show-search-result
        :area-list="areaList"
        :search-result="searchResult"
        :area-columns-placeholder="['请选择', '请选择', '请选择']"
        @save="onSave"
        @delete="onDelete"
        @change-detail="onChangeDetail"
      />
    </div>
    <!-- 支付页面 -->
    <div class="payPage" v-if="pageFlag">
      <div class="bank"></div>
      <div class="pay-box">
        <div class="pay-mess">
          <div class="title">米游铺商品</div>
          <div class="price"><i>￥</i>{{ (totalPrice / 100).toFixed(2) }}</div>
          <!-- 取消按钮 -->
          <div class="cancel iconfont icon-closel" @click="giveupFlag = true"></div>
        </div>
        <div class="pay-style">
          <div class="aliPay" @click="payStyleFlag = !payStyleFlag">
            <div class="pay-left">
              <i
                ><img
                  src="https://sdk-webstatic.mihoyo.com/sdk-payment-upload/2023/01/11/39b073aecd836c23fcc946cb21f44cb8_8633839261714476275.png"
                  alt=""
              /></i>
              <span>支付宝</span>
            </div>
            <div :class="['pay-right', 'iconfont', 'icon-tick', { con: payStyleFlag }]"></div>
          </div>
          <div class="weChat" @click="payStyleFlag = !payStyleFlag">
            <div class="pay-left">
              <i
                ><img
                  src="https://sdk-webstatic.mihoyo.com/sdk-payment-upload/2023/01/11/872a682b635c801b568214479464092b_4558682075688947537.png"
                  alt=""
              /></i>
              <span>微信</span>
            </div>
            <div :class="['pay-right', 'iconfont', 'icon-tick', { con: !payStyleFlag }]"></div>
          </div>
        </div>
        <div class="pay-btn" @click="immediaPay">立即支付</div>
      </div>
    </div>
    <!-- 放弃支付 -->
    <div class="giveupPay" v-if="giveupFlag">
      <div class="giveup-box">
        <div class="text">
          <h5>确认放弃本次支付?</h5>
          <p>您的订单还未完成支付，请尽快支付哦。</p>
        </div>
        <div class="btn">
          <div class="affirm-btn" @click="affirm">确认放弃</div>
          <div class="continue-btn" @click="giveupFlag = false">继续支付</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
// 确认订单
.order-til {
  display: flex;
  width: 100%;
  height: 44px;
  line-height: 44px;
  position: fixed;
  top: 0;
  padding: 10px;
  background-color: #fff;
  .back_btn,
  .entry {
    width: 10%;
    font-size: 20px;
  }
  .title {
    text-align: center;
    font-size: 18px;
    flex: 1;
  }
}
// 收货地址
.address {
  margin-top: 65px;
  .add_con {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #eee;
    background-color: #fff;
    padding: 20px;
    font-size: 16px;
    span i {
      font-size: 14px;
      margin-right: 8px;
    }
    .icon-youjiantou {
      font-size: 12px;
    }
  }
  // 选择后的地址
  .chosed_addredss {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #eee;
    background-color: #fff;
    padding: 20px;
    padding-bottom: 0px;
    height: 65px;
    font-size: 16px;
    .chosed_left {
      display: flex;
      .chosed_icon {
        padding-top: 2px;
        margin-right: 5px;
        i {
          font-size: 15px;
        }
      }
      .chosed_con {
        .cho_top {
          margin-bottom: 8px;
        }
        .cho_bo {
          color: #9696a1;
          font-size: 14px;
        }
      }
    }
    .chosed_right {
      i {
        color: #9696a1;
        font-size: 12px;
      }
    }
  }
}

// 商品信息
.goods-info {
  // height: 118px;
  background-color: #ffffff;
  margin-top: 10px;
  // 信息
  .goods_mess {
    display: flex;
    padding: 12px;

    .img {
      width: 80px;
      height: 80px;
      margin-right: 12px;
      border-radius: 6px;
      // background-color: pink;
      img {
        border-radius: 6px;
        width: 100%;
      }
    }
    .good_con {
      width: 60%;
      font-size: 14px;
      flex: 1;
      .title {
        display: flex;
        justify-content: space-between;
        .one_price {
          margin-left: 20px;
        }
      }
      .good_dec {
        display: flex;
        margin-top: 10px;
        justify-content: space-between;
        .dec {
          color: #9696a1;
        }
        .one_count {
          margin-left: 20px;
        }
      }
    }
  }
  // 小计
  .subtotal {
    padding: 12px;

    .sub_item {
      display: flex;
      margin-top: 10px;
      font-size: 14px;
      justify-content: space-between;
    }
    .sub_tol {
      display: flex;
      margin-top: 12px;
      line-height: 20px;
      justify-content: flex-end;
      .sub_pri {
        font-weight: 700;
        font-size: 15px;
        font-family: 'Fira Sans Black Italic';
      }
    }
  }
}

// 备注
.remark {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  padding: 15px;
  font-size: 14px;
  border-top: 8px solid #f3f3f4;
  input {
    flex: 1;
    border: 0;
    color: #9696a1;
    text-align: right;
    margin-left: 10px;
  }
  input[type='text']::placeholder {
    color: #9696a1;
  }
}

// 提交订单
.sub_order {
  position: fixed;
  width: 100%;
  bottom: 0;
  background-color: #fff;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 10px 0;
  font-size: 16px;
  .con {
    margin-right: 12px;
    span {
      font-weight: 700;
      font-size: 17px;
      font-family: 'Fira Sans Black Italic';
      i {
        font-size: 14px;
      }
    }
  }
  .submit-btn {
    padding: 12px 25px;
    margin-right: 10px;
    border-radius: 20px;
    color: #fff;
    background-color: #ff6d6d;
  }
}

// 选择收货地址
.chose_address {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 888;
  background-color: rgba(0, 0, 0, 0.5);
  .bank {
    height: 35%;
  }
  .add_con {
    position: relative;
    height: 65%;
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
    background-color: #fff;
    .title {
      padding-top: 12px;
      margin-left: 12px;
    }
    // 未添加
    .no_address {
      position: absolute;
      top: 50%;
      left: 50%;
      color: #ccc;
      transform: translate(-50%, -50%);
      .img {
        width: 60px;
        height: 60px;
        margin: 0 auto;
        margin-bottom: 10px;
        // background-color: pink;
        img {
          width: 100%;
        }
      }
    }
    // 已添加
    .has_address {
      margin-top: 20px;
      padding: 0 12px;

      // 每一项地址
      .address_item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        margin-top: 20px;
        padding-bottom: 15px;
        border-bottom: 1px solid #f6f6f6;
        // 左
        .item_left {
          display: flex;
          align-items: center;
          i {
            width: 18px;
            height: 18px;
            line-height: 18px;
            border-radius: 50%;
            font-size: 12px;
            text-align: center;
            color: #fff;
            border: 1px solid #d1d1d1;
            margin-right: 15px;
            &.con {
              border: 1px solid #ff6d6d;
              background-color: #ff6d6d;
            }
          }
          .message {
            .mess_top {
              margin-bottom: 5px;
              span {
                color: #afaaad;
                margin-right: 8px;
              }
              .name {
                color: #000;
              }
              .default {
                font-weight: 600;
                color: #ff6d6d;
                font-size: 13px;
                padding: 2px;
                background-color: #ffe2e2;
              }
            }
            .mess_bo {
              color: #49494a;
              span {
                margin-right: 8px;
              }
            }
          }
        }
        // 右
        .item_right {
          color: #d3d3d3;
        }
      }
    }
    // 新增按钮
    .add_btn {
      position: absolute;
      width: 100%;
      bottom: 0;
      height: 60px;
      border-top: 1px solid #eee;
      span {
        display: block;
        width: 90%;
        height: 40px;
        line-height: 40px;
        margin: auto;
        margin-top: 10px;
        color: #fff;
        border-radius: 50px;
        text-align: center;
        font-size: 14px;
        background-color: #ff6d6d;
      }
    }
  }
}

// 新增收货地址
.add_address {
  position: absolute;

  width: 100%;
  height: 100vh;
  top: 0;
  z-index: 999;
  background-color: #fff;
  .title {
    display: flex;
    line-height: 44px;
    background-color: #f8f8f8;
    i {
      font-size: 16px;
      margin-left: 15px;
    }
    span {
      width: 85%;
      text-align: center;
      font-size: 16px;
    }
  }
}

// 支付页面
.payPage {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 888;
  background-color: rgba(0, 0, 0, 0.5);
  .bank {
    height: 55%;
  }
  .pay-box {
    position: relative;
    width: 100%;
    height: 45%;
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
    background-color: #fff;
    .pay-mess {
      display: flex;
      position: relative;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding-top: 30px;
      font-size: 14px;
      .price {
        margin-top: 15px;
        color: #ff6d6d;
        font-size: 26px;
        i {
          font-size: 16px;
        }
      }
      // 取消按钮
      .cancel {
        position: absolute;
        top: 10px;
        right: 10px;
        font-size: 16px;
      }
    }
    .pay-style {
      padding: 0 12px;
      .aliPay,
      .weChat {
        display: flex;
        padding: 20px 0;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #eee;
        .pay-left {
          display: flex;
          align-items: center;
          font-size: 14px;
          i {
            display: inline-block;
            width: 26px;
            height: 26px;
            margin-right: 8px;
            // background-color: pink;
            img {
              width: 100%;
            }
          }
        }
        .pay-right {
          width: 18px;
          height: 18px;
          line-height: 18px;
          border-radius: 50%;
          font-size: 12px;
          text-align: center;
          color: #fff;
          border: 1px solid #d1d1d1;
          margin-right: 15px;
          &.con {
            border: 1px solid #ff6d6d;
            background-color: #ff6d6d;
          }
        }
      }
    }
    .pay-btn {
      width: 90%;
      height: 40px;
      margin: 12px auto;
      line-height: 40px;
      border-radius: 50px;
      text-align: center;
      color: #fff;
      font-size: 14px;
      background-color: #ff6d6d;
    }
  }
}

// 放弃支付
.giveupPay {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  z-index: 888;
  background-color: rgba(0, 0, 0, 0.5);
  .giveup-box {
    width: 70%;
    height: 130px;
    border-radius: 15px;
    background-color: #fff;
    .text {
      text-align: center;
      h5 {
        color: #000;
        font-size: 16px;
        margin: 15px 0 8px 0;
      }
      p {
        font-size: 13px;
        color: #afaaad;
      }
    }
    .btn {
      display: flex;
      margin-top: 15px;
      padding: 0 12px;
      div {
        flex: 1;
        text-align: center;
        padding: 10px 20px;
        border-radius: 30px;
        background-color: pink;
      }
      .affirm-btn {
        color: #ff6d6d;
        background-color: #ffe9e9;
        margin-right: 10px;
      }
      .continue-btn {
        color: #fff;
        background-color: #ff6d6d;
      }
    }
  }
}
#app {
  background: #f7f8fa;
}
</style>
